<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />

        <title>【大话2】选秀 投票</title>

        <link rel="stylesheet" href="css/index.css" />
        <link rel="stylesheet" href="css/vote.css" />

        <!--[if lt IE 9]>
        <link rel="stylesheet" href="css/ltIE9.css" />
        <![endif]-->

    </head>

    <body>
        <!--<div id="NIE-topBar"></div>-->
        <div id="sidebar">
            <img src="img/vote_sidebar.png" />
            <span class="close"></span>
            <span class="button1"><a href="#" style="width: 147px;"></a></span>
            <span class="button2"><a href="#" style="width: 236px;"></a></span>
            <span class="button3"><a href="#" style="width: 236px;"></a></span>
            <img src="img/sidebar_img1.png" style="position: absolute;top: 280px;left: 200px;" />
        </div>
        <div id="page">
            <div class="container">
                <a href="#" id="logo"><img src="img/logo.png" style="height:50px;" /></a>
                <a href="#" ><img src="img/helper.png" style="height:50px;margin-left:20px;" /></a>
            </div>

            <div id="vote_banner">

            </div>

            <div id="vote_share">
                <div class="button modal_btn" data-modal="#shareModal"></div>
            </div>

            <div id="vote_main" class="clearfix">

                <!--在修改这个投票名单的时候，需要修改  data-id 属性 、 data-name属性、<span>人气值：</span>、<span>参赛选手：</span>。头像src在js里面自动处理了不需要手动添加 -->
                <div class="vote" data-id="1" data-name="Agnes_wu">
                    <div class="face">
                        <img src="" />
                    </div>
                    <div class="button play modal_btn" data-modal="#playModal"></div>
                    <div class="info">
                        <span>人气值:100001</span>
                        <span>参赛选手:Agnes_wu</span>
                    </div>
                    <div class="button vote modal_btn" data-modal="#voteModal"></div>
                </div>
                <div class="vote" data-id="2" data-name="CV清禾">
                    <div class="face">
                        <img src="" />
                    </div>
                    <div class="button play modal_btn" data-modal="#playModal"></div>
                    <div class="info">
                        <span>人气值:100000</span>
                        <span>参赛选手:CV清禾</span>
                    </div>
                    <div class="button vote modal_btn" data-modal="#voteModal"></div>
                </div>
                <div class="vote" data-id="3" data-name="DJ_YoYo">
                    <div class="face">
                        <img src="" />
                    </div>
                    <div class="button play modal_btn" data-modal="#playModal"></div>
                    <div class="info">
                        <span>人气值:100000</span>
                        <span>参赛选手:DJ_YoYo</span>
                    </div>
                    <div class="button vote modal_btn" data-modal="#voteModal"></div>
                </div>
                <div class="vote" data-id="4" data-name="KenRyan">
                    <div class="face">
                        <img src="" />
                    </div>
                    <div class="button play modal_btn" data-modal="#playModal"></div>
                    <div class="info">
                        <span>人气值:100000</span>
                        <span>参赛选手:KenRyan</span>
                    </div>
                    <div class="button vote modal_btn" data-modal="#voteModal"></div>
                </div>
                <div class="vote" data-id="5" data-name="NJ冰山">
                    <div class="face">
                        <img src="" />
                    </div>
                    <div class="button play modal_btn" data-modal="#playModal"></div>
                    <div class="info">
                        <span>人气值:100000</span>
                        <span>参赛选手:NJ冰山</span>
                    </div>
                    <div class="button vote modal_btn" data-modal="#voteModal"></div>
                </div>
                <div class="vote" data-id="6" data-name="NJ楚漓">
                    <div class="face">
                        <img src="" />
                    </div>
                    <div class="button play modal_btn" data-modal="#playModal"></div>
                    <div class="info">
                        <span>人气值:100000</span>
                        <span>参赛选手:NJ楚漓</span>
                    </div>
                    <div class="button vote modal_btn" data-modal="#voteModal"></div>
                </div>
                <div class="vote" data-id="7" data-name="NJ麦哥哥">
                    <div class="face">
                        <img src="" />
                    </div>
                    <div class="button play modal_btn" data-modal="#playModal"></div>
                    <div class="info">
                        <span>人气值:100000</span>
                        <span>参赛选手:NJ麦哥哥</span>
                    </div>
                    <div class="button vote modal_btn" data-modal="#voteModal"></div>
                </div>
                <div class="vote" data-id="8" data-name="NJ若素">
                    <div class="face">
                        <img src="" />
                    </div>
                    <div class="button play modal_btn" data-modal="#playModal"></div>
                    <div class="info">
                        <span>人气值:100000</span>
                        <span>参赛选手:NJ若素</span>
                    </div>
                    <div class="button vote modal_btn" data-modal="#voteModal"></div>
                </div>
                <div class="vote" data-id="9" data-name="NJ早安">
                    <div class="face">
                        <img src="" />
                    </div>
                    <div class="button play modal_btn" data-modal="#playModal"></div>
                    <div class="info">
                        <span>人气值:100000</span>
                        <span>参赛选手:NJ早安</span>
                    </div>
                    <div class="button vote modal_btn" data-modal="#voteModal"></div>
                </div>
                <div class="vote" data-id="10" data-name="屌丝大咖秀">
                    <div class="face">
                        <img src="" />
                    </div>
                    <div class="button play modal_btn" data-modal="#playModal"></div>
                    <div class="info">
                        <span>人气值:100000</span>
                        <span>参赛选手:屌丝大咖秀</span>
                    </div>
                    <div class="button vote modal_btn" data-modal="#voteModal"></div>
                </div>
                <div class="vote" data-id="11" data-name="季子樱">
                    <div class="face">
                        <img src="" />
                    </div>
                    <div class="button play modal_btn" data-modal="#playModal"></div>
                    <div class="info">
                        <span>人气值:100000</span>
                        <span>参赛选手:季子樱</span>
                    </div>
                    <div class="button vote modal_btn" data-modal="#voteModal"></div>
                </div>
                <div class="vote" data-id="12" data-name="神秘kook">
                    <div class="face">
                        <img src="" />
                    </div>
                    <div class="button play modal_btn" data-modal="#playModal"></div>
                    <div class="info">
                        <span>人气值:100000</span>
                        <span>参赛选手:神秘kook</span>
                    </div>
                    <div class="button vote modal_btn" data-modal="#voteModal"></div>
                </div>
                <div class="vote" data-id="13" data-name="心无涯">
                    <div class="face">
                        <img src="" />
                    </div>
                    <div class="button play modal_btn" data-modal="#playModal"></div>
                    <div class="info">
                        <span>人气值:100000</span>
                        <span>参赛选手:心无涯</span>
                    </div>
                    <div class="button vote modal_btn" data-modal="#voteModal"></div>
                </div>
                <div class="vote" data-id="14" data-name="星魂故事">
                    <div class="face">
                        <img src="" />
                    </div>
                    <div class="button play modal_btn" data-modal="#playModal"></div>
                    <div class="info">
                        <span>人气值:100000</span>
                        <span>参赛选手:星魂故事</span>
                    </div>
                    <div class="button vote modal_btn" data-modal="#voteModal"></div>
                </div>
                <div class="vote" data-id="15" data-name="阎么么">
                    <div class="face">
                        <img src="" />
                    </div>
                    <div class="button play modal_btn" data-modal="#playModal"></div>
                    <div class="info">
                        <span>人气值:100000</span>
                        <span>参赛选手:阎么么</span>
                    </div>
                    <div class="button vote modal_btn" data-modal="#voteModal"></div>
                </div>
                <div class="vote" data-id="16" data-name="晏千朝echell">
                    <div class="face">
                        <img src="" />
                    </div>
                    <div class="button play modal_btn" data-modal="#playModal"></div>
                    <div class="info">
                        <span>人气值:100000</span>
                        <span>参赛选手:晏千朝echell</span>
                    </div>
                    <div class="button vote modal_btn" data-modal="#voteModal"></div>
                </div>
                <div class="vote" data-id="17" data-name="意料之Y">
                    <div class="face">
                        <img src="" />
                    </div>
                    <div class="button play modal_btn" data-modal="#playModal"></div>
                    <div class="info">
                        <span>人气值:100000</span>
                        <span>参赛选手:意料之Y</span>
                    </div>
                    <div class="button vote modal_btn" data-modal="#voteModal"></div>
                </div>
                <div class="vote" data-id="18" data-name="有声的紫襟">
                    <div class="face">
                        <img src="" />
                    </div>
                    <div class="button play modal_btn" data-modal="#playModal"></div>
                    <div class="info">
                        <span>人气值:100000</span>
                        <span>参赛选手:有声的紫襟</span>
                    </div>
                    <div class="button vote modal_btn" data-modal="#voteModal"></div>
                </div>
                <div class="vote" data-id="19" data-name="月狼_vl">
                    <div class="face">
                        <img src="" />
                    </div>
                    <div class="button play modal_btn" data-modal="#playModal"></div>
                    <div class="info">
                        <span>人气值:100000</span>
                        <span>参赛选手:月狼_vl</span>
                    </div>
                    <div class="button vote modal_btn" data-modal="#voteModal"></div>
                </div>
                <div class="vote" data-id="20" data-name="主播大哈">
                    <div class="face">
                        <img src="" />
                    </div>
                    <div class="button play modal_btn" data-modal="#playModal"></div>
                    <div class="info">
                        <span>人气值:100000</span>
                        <span>参赛选手:主播大哈</span>
                    </div>
                    <div class="button vote modal_btn" data-modal="#voteModal"></div>
                </div>
            </div>

        </div>

        <div id="judges">
            <div>
                <img src="img/vote_judges.jpg" />
            </div>
        </div>

        <div id="helper_wrapper" >
            <div id="helper" class="">
                <div id="helper_left">
                    <div id="helper_logo">
                        <img src="img/helper.png" />
                    </div>
                    <div id="helper_download">
                        <div id="helper_code">
                            <img src="img/helper_code.png" />
                            <span><font style="color: red;">·</font>扫描二维码下载</span>
                        </div>
                        <div id="helper_buttons">
                            <a id="helper_button1" href="http://zs.163.com/xy2/" target="_blank"> </a>
                            <a id="helper_button2" href="http://zs.163.com/xy2/" target="_blank"> </a>
                        </div>
                    </div>
                </div>
                <div id="helper_right">
                    <img src="img/phones.png" />
                </div>
                <div style="clear: both;"></div>
            </div>
        </div>
        <style>
            #NIE-copyRight a {
                text-decoration: none;
                color: #111;
            }
        </style>
        <div id="NIE-copyRight" style="margin:50px 0px; "></div>

        <div class="none" id="mask"></div>

        <div class="modal out" id="shareModal">
            <div class="modal_head">
                <button class="close"></button>
                <p>
                    活动内容
                </p>
            </div>
            <div class="modal_body">
                <div class="section">
                    <h1>活动时间：6月22日-7月1日</h1>
                    <p style="margin:30px 0px 30px 0px;">
                        1、微博分享赢好礼：分享活动到新浪微博或者腾讯微博并@网易看游戏 和@三位好友，就有机会获得点卡。我们将抽取10位幸运玩家，送出网易点卡。
                    </p>
                    <p style="margin:30px 0px 30px 0px;">
                        2、微信朋友圈分享赢好礼：分享活动到微信朋友圈，并将截图发送给公共账号：网易看游戏。
                        我们将抽取10位幸运玩家，送出网易点卡。
                    </p>
                </div>

            </div>

        </div>

        <div class="modal out" id="voteModal" style="background-color:rgb(247,246,243);">
            <div class="modal_head" >
                <button class="close"></button>
                <p style="background-color:rgb(247,246,243);">
                    恭喜您投票成功！
                </p>
            </div>
            <div class="modal_body">
                <div class="section" style="float:left;width:47%;padding-right: 10%;">
                    <h1>在《大话2助手》中投票，还能获得<span style="color:rgb(235,170,67)">龙马分享版、至尊宝公仔</span>抽奖机会！还有海量点卡等你拿!</h1>
                    <img src="img/vote_vote1.jpg" />
                </div>
                <div class="section" style="float:left;width:43%;">
                    <h1>扫描二维码！火速下载《大话2助手》吧~</h1>
                    <img style="margin-top:25px;" src="img/vote_vote2.jpg" />
                </div>
            </div>
        </div>

        <div class="modal out" id="playModal">
            <div class="modal_head">
                <button class="close"></button>
                <p>
                    试听作品
                </p>
            </div>
            <div class="modal_body">
                <div class="section" style="text-align: center;">

                    <div class="face">
                        <img src="" />
                    </div>
                    <div class="info">
                        <span style="display: block;"></span>
                        <span style="display: block;"></span>
                    </div>

                    <audio src="" controls="controls" preload="auto" style="margin-top: 30px;"></audio>
                </div>

            </div>

        </div>

        <script src="js/jquery(mixNIE).last.js" ></script>
        <script src="js/index.js"></script>
        <script>
            $(function() {
                var IE = null;
                if($.browser.msie&&($.browser.version == "7.0")){
                    IE = 7;
                }
                if($.browser.msie&&($.browser.version == "8.0")){
                    IE = 8;
                }
                if($.browser.msie&&($.browser.version == "6.0")){
                    IE = 6;
                }
                
                

                var res_path = "./res/大话2寻找知音大赛20强入围名单/";

                //滚动监听，移动sidebar
                window.onscroll = function() {
                    var offset;

                    if($(window).height() >= 868) {
                        offset = 100;
                        var top = window.scrollY + offset;

                    } else {
                        offset = 100;
                        var top = offset;

                    }
                    $("#sidebar").css({
                        "top" : top
                    });
                }

                window.onresize = function() {
                    var left = $("#vote_main").offset().left + $("#vote_main").width();

                    $("#sidebar").css({
                        "left" : left
                    });
                }

                $(window).trigger("resize");

                $("#sidebar .close").click(function() {
                    $("#sidebar").fadeOut();
                })
                //初始化头像
                $(".vote .face img").each(function(index, face) {
                    var $vote = $(this).parents(".vote");
                    var id = $vote.attr("data-id");
                    var name = $vote.attr("data-name");

                    var face_src = res_path + name + "/" + name + ".png";

                    $(this).attr("src", face_src);

                });

                $(".button.vote").click(function() {
                    //这里添加投票处理

                    var $vote = $(this).parents(".vote");

                    var id = $vote.attr("data-id");
                    var name = $vote.attr("data-name");

                    //console.log("id:" + id);
                    //console.log("name:" + name);

                });

                $(".button.play").click(function() {
                    var $vote = $(this).parents(".vote");

                    var id = $vote.attr("data-id");
                    var name = $vote.attr("data-name");
                    var spanText1 = $vote.find(".info span:eq(0)").text();
                    var spanText2 = $vote.find(".info span:eq(1)").text();

                    var face_src = res_path + name + "/" + name + ".png";
                    var audio_src = res_path + name + "/" + name + ".mp3";

                    $("#playModal").find(".face img").attr("src", face_src);
                    $("#playModal").find(".info span:eq(0)").text(spanText1);
                    $("#playModal").find(".info span:eq(1)").text(spanText2);
                    $("#playModal").find("audio").attr("src", audio_src);
                    
                    //alert(IE);
                    if(IE&&IE<=8){
                        var $embed = $('<embed src=' + audio_src + '>');
                        $("#playModal").find("audio").after($embed);
                    }
                    

                })
            })

        </script>

    </body>

</html>